<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Ajax 01 Page</h1>
    <button  onclick="doAjaxStart()">Ajax Get Request Start</button>
    <span id="result"></span>
</div>
<script>
    function doAjaxStart(){//JS中问题的调试-日志，debugger，排除法
        //console.log("===doAjaxStart()===")
        //debugger //在浏览器控制台打开状态下断点才会生效
        //1.create xhr对象(此对象是ajax应用的入口对象)
        let xhr=new XMLHttpRequest();
        //2.设置状态监听(监听客户端与服务端的通讯过程)
        xhr.onreadystatechange=function(){//此函数在客户端与服务端的通讯状态发生变化时执行
            if(xhr.readyState==4){//4 表示服务端响应到客户端结果，客户端已接收完成
                if(xhr.status==200){//200 表示服务端处理请求的过程是ok的
                    let result=xhr.responseText;//获取服务端响应到客户端的文本信息
                    document.getElementById("result").innerHTML=result;
                }
            }
        }
        //3.建立一个与服务端指定url的链接
        let url="http://localhost/doAjaxStart";
        xhr.open("Get",url,true);//true表示异步请求
        //4.发送请求
        xhr.send(null);//这个请求交给谁去发送？(ajax 引擎)
        console.log("===main===")
    }
</script>
</body>
</html>